<template>
  <div class="cashAndSavings">
    <div class="top">
      <div class="company orange-border">
        <div class="totalMoney">
          <span>胜博</span>
          <span>3,968,245.76</span>
        </div>
        <div class="storageList">
          <div v-for="index in 5" :key="index">
            <i class="el-icon-money"></i>
            <div>
              <span>工商银行</span>
              <div>余额<span>4,392,843.59</span></div>
            </div>
          </div>
        </div>
      </div>
      <div class="company orange-border">
        <div class="totalMoney">
          <span>三才</span>
          <span>3,968,245.76</span>
        </div>
        <div class="storageList">
          <div v-for="index in 5" :key="index">
            <i class="el-icon-money"></i>
            <div>
              <span>工商银行</span>
              <div>余额<span>4,392,843.59</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom blue-border">
      <div class="title">月余额明细</div>
      <lineChart ref="monthBalanceChart"></lineChart>
    </div>
  </div>
</template>
<script>
import lineChart from './lineChart'

export default {
  components: { lineChart },
  data() {
    return {}
  },
  mounted() {
    this.getMonthBalance()
  },
  methods: {
    // 获取月余额明细
    getMonthBalance() {
      let legendData = ['胜博', '三才']
      let xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',]
      let series = [
        {
          name: '胜博',
          type: 'line',
          data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90],
          itemStyle: {
            normal: {
              color: "#19B6F9", //改变折线点的颜色
              lineStyle: {
                color: "#19B6F9", //改变折线颜色
              },
            },
          },
        },
        {
          name: '三才',
          type: 'line',
          data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290],
          itemStyle: {
            normal: {
              color: "#FA9200", //改变折线点的颜色
              lineStyle: {
                color: "#FA9200", //改变折线颜色
              },
            },
          },
        },
      ]
      this.$refs.monthBalanceChart.initChart(legendData, xAxisData, series)
    }
  }
}
</script>
<style lang="scss" scoped>
@import 'border.css';

.cashAndSavings {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  >div {
    height: 40%;
  }

  .top {
    display: flex;
    margin: 0 -10px 24px;


    .company {
      height: 100%;
      flex-grow: 1;
      padding: 26px;
      margin: 0 10px;
      display: flex;
      width: 50%;

      .totalMoney {
        width: 40%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-weight: 400;
        font-size: 24px;
        color: #333333;
        line-height: 40px;

        span:nth-child(2) {
          font-weight: bold;
          font-size: 32px;
        }
      }

      .storageList {
        display: flex;
        flex-wrap: wrap;
        width: 60%;

        >div {
          width: 40%;
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          background: #FFFFFF;
          border-radius: 8px 8px 8px 8px;
          margin-bottom: 22px;
          margin-right: 34px;
          padding: 20px;
          height: 24%;

          div {
            div {
              font-size: 12px;
              line-height: 24px;

              span {
                margin-left: 10px;
                font-weight: bold;
                color: #333333;
              }
            }


          }

          i {
            font-size: 28px;
            margin-right: 18px;

          }
        }
      }
    }
  }

  .bottom {
    padding: 26px;

    .title {
      font-weight: bold;
      font-size: 20px;
      color: #000000;
      text-align: center;
      margin: 0 0 20px;

    }

    flex-grow: 1;
  }
}
</style>